<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="../../css/mypetstore.css" type="text/css" media="screen"/>
</head>
<body>
<h3>Account Information</h3>

<table>
    <tr>
        <td>First name:</td>
        <td><input type="text" id="firstName" name="firstName" /></td>
    </tr>
    <tr>
        <td>Last name:</td>
        <td><input type="text" id="lastName" name="lastName" /></td>
    </tr>
    <tr>
        <td>Email:</td>
        <td>
            <input type="text" size="40" id="email" name="email" />
            <img id="right_email"style="display:none"src="../../images/right.jpg" width="15" height="15">
            <img id="wrong_email"style="display:none"src="../../images/wrong.jpg"width="15" height="15">
            <div id="emailAvailability"></div>
        </td>
    </tr>
    <tr>
        <td>Phone:</td>
        <td>
            <input type="text" id="phone" name="phone" />
            <img id="right_phone"style="display:none"src="../../images/right.jpg" width="15" height="15">
            <img id="wrong_phone"style="display:none"src="../../images/wrong.jpg"width="15" height="15">
            <div id="phoneAvailability"></div>
        </td>
    </tr>
    <tr>
        <td>Address 1:</td>
        <td>
            <input type="text" size="40" id="address1" name="address1" />
            <img id="right_address1"style="display:none"src="../../images/right.jpg" width="15" height="15">
            <img id="wrong_address1"style="display:none"src="../../images/wrong.jpg"width="15" height="15">
            <div id="address1Availability"></div>
        </td>
    </tr>
    <tr>
        <td>Address 2:</td>
        <td>
            <input type="text" size="40" id="address2" name="address2" />
            <img id="right_address2"style="display:none"src="../../images/right.jpg" width="15" height="15">
            <img id="wrong_address2"style="display:none"src="../../images/wrong.jpg"width="15" height="15">
            <div id="address2Availability"></div>
        </td>
    </tr>
    <tr>
        <td>City:</td>
        <td>
            <input type="text" id="city" name="city" />
            <img id="right_city"style="display:none"src="../../images/right.jpg" width="15" height="15">
            <img id="wrong_city"style="display:none"src="../../images/wrong.jpg"width="15" height="15">
            <div id="cityAvailability"></div>
        </td>
    </tr>
    <tr>
        <td>State:</td>
        <td>
            <input type="text" size="4" id="state" name="state" />
            <img id="right_state"style="display:none"src="../../images/right.jpg" width="15" height="15">
            <img id="wrong_state"style="display:none"src="../../images/wrong.jpg"width="15" height="15">
            <div id="stateAvailability"></div>
        </td>
    </tr>
    <tr>
        <td>Zip:</td>
        <td>
            <input type="text" size="10" id="zip" name="zip" />
            <img id="right_zip"style="display:none"src="../../images/right.jpg" width="15" height="15">
            <img id="wrong_zip"style="display:none"src="../../images/wrong.jpg"width="15" height="15">
            <div id="zipAvailability"></div>
        </td>
    </tr>
    <tr>
        <td>Country:</td>
        <td>
            <input type="text" size="15" id="country" name="country" />
            <img id="right_country"style="display:none"src="../../images/right.jpg" width="15" height="15">
            <img id="wrong_country"style="display:none"src="../../images/wrong.jpg"width="15" height="15">
            <div id="countryAvailability"></div>
        </td>
    </tr>
</table>

<h3>Profile Information</h3>

<table>
    <tr>
        <td>Language Preference:</td>
        <td>
            <select id="languagePreference" name="languagePreference">
                <option value="english">english</option>
                <option value="chinese">chinese</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>Favourite Category:</td>
        <td>
            <select id="favouriteCategoryId" name="favouriteCategoryId">
                <option value="BIRDS">BIRDS</option>
                <option value="CATS">CATS</option>
                <option value="DOGS">DOGS</option>
                <option value="FISH">FISH</option>
                <option value="REPTILE">REPTILES</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>Enable MyList</td>
        <td><input type="checkbox" id="listOption" name="listOption" /></td>
    </tr>
    <tr>
        <td>Enable MyBanner</td>
        <td><input type="checkbox" id="bannerOption" name="bannerOption" /></td>
    </tr>

</table>

</body>
</html>